let that
// 声明类
class Tabs {
  constructor(id) {
    that = this
    // 获取tab盒子（父级）
    this.main = document.querySelector(id)
    // 获取li的父级
    this.ul = document.querySelector('.fisrstnav ul')
    // 获取添加按钮
    this.addBtn = this.main.querySelector('.fisrstnav .tabadd')
    // 获取section的父级
    this.sectionsFather = this.main.querySelector('.tabsbox .tabscon')

    this.init()
  }

  //动态获取列表
  updata() {
    // 获取所有的li
    this.lis = this.main.querySelectorAll('.fisrstnav li')
    // 获取所有的section
    this.sections = this.main.querySelectorAll('.tabscon section')
    // 获取所有的删除按钮
    this.delBtns = this.main.querySelectorAll('.fisrstnav li .iconfont')
    // 获取spans
    this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
  }

  // 初始化绑定点击事件
  init() {
    // 调用动态获取事件
    this.updata()
    // 绑定点击新增事件
    this.addBtn.addEventListener('click', this.addTabs)

    this.lis.forEach((item, index) => {
      item.index = index
      item.addEventListener('click', this.toggleTabs)
    })

    // 绑定点击删除事件
    this.delBtns.forEach(item => {
      item.addEventListener('click', this.delTabs)
    })

    // 绑定双击修改事件
    this.spans.forEach(item => {
      item.addEventListener('dblclick', this.editTabs)
    })

    this.sections.forEach(item => {
      item.addEventListener('dblclick', this.editTabs)
    })
  }

  // 清空类名
  clearClassName() {
    // console.log(1);
    this.lis.forEach(item => {
      item.className = ''
    })
    this.sections.forEach(item => {
      item.className = ''
    })
  }

  // 切换事件
  toggleTabs() {
    // 调用清空类名函数
    that.clearClassName()
    // 保留自己
    this.className = 'liactive'
    that.sections[this.index].className = 'conactive'
  }

  // 添加功能
  addTabs() {
    // 调用清空类名函数
    that.clearClassName()
    // 创建需要添加的li
    const li = `<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>`
    // 创建需要添加的section
    const section = `<section class="conactive">测试${Math.random()}</section>`
    // 把li添加进去
    that.ul.insertAdjacentHTML('beforeend', li)
    // 把section添加进去
    that.sectionsFather.insertAdjacentHTML('beforeend', section)
    // 调用初始化
    that.init()
  }

  // 删除功能
  delTabs(e) {
    e.stopPropagation()
    const index = this.parentNode.index
    // 删除父节点
    this.parentNode.remove()
    that.sections[index].remove()
    // console.log(index)
    that.init()
    if (that.main.querySelector('.liactive')) return
    index ? that.lis[index - 1]?.click() : that.lis[index]?.click()
  }

  // 修改功能
  editTabs() {
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    // 存放内容到str中
    const str = this.innerHTML
    // 将span的内容改为input框
    this.innerHTML = `<input type="text">`
    // 获取input框
    const input = this.children[0]
    // 将str取给input框
    input.value = str
    // 选中input框的内容
    input.select()
    // 给input绑定失焦事件
    input.onblur = function () {
      this.parentNode.innerHTML = input.value;
    };
    // 绑定回车触发失焦事件
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur();
      }
    }
  }
}
// 实例化对象
new Tabs('#tab')